<template>
  <div class="login_container">
    <div class="bg"></div>
    <div class="header">
      <!-- 可以放个校徽 -->
      <img src="#" alt="" />
      <h3 class="title">北航二手货交易平台</h3>
    </div>
    <div class="login_box">
      <div class="login_top">会员登录</div>
      <!-- 登录表单 -->
      <el-form
        :model="loginForm"
        :rules="loginRules"
        ref="loginForm"
        class="login_form"
      >
        <el-form-item label="用户名" class="in" prop="username">
          <el-input
            v-model="loginForm.username"
            prefix-icon="el-icon-user-solid"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" class="in" prop="password">
          <el-input
            v-model="loginForm.password"
            prefix-icon="el-icon-lock"
            placeholder="请输入密码"
            show-password
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item class="butoton">
          <el-button type="primary" @click="login" style="margin-top: 30px"
            >登 录</el-button
          >
          <el-button type="primary" @click="regest" style="margin-top: 30px"
            >注 册</el-button
          >
        </el-form-item>
      </el-form>
      <el-button @click="admin" style="margin-top: 10px">管理员登录</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //表单绑定对象
      loginForm: {
        username: "a",
        password: "123",
      },
      //表单规则验证
      loginRules: {
        //用户名规则
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          // { max: 8, min: 8, message: "请输入8位用户名", trigger: "blur" },
        ],
        //密码验证
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    login() {
      // 表单预验证;>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
      this.$refs.loginForm.validate(async (valid) => {
        if (!valid) return;
        const { data: result } = await this.$http.post("login", this.loginForm);
        if (result.success === true) {
          this.$message.success("登录成功!");
          window.sessionStorage.setItem("username", this.loginForm.username);
          window.sessionStorage.setItem(
            "userimg",
            "http://8.140.135.252:8080" + result.iconUrl
          );
          window.sessionStorage.setItem("userid", result.uid);
          window.sessionStorage.setItem("email", result.email);
          var list = localStorage.getItem(result.uid);
          if (list == null) localStorage.setItem(result.uid, "[]");
          this.$store.commit("initTalktoList");
          this.$store.commit("login");
          //跳转到主页
          this.$router.push("home");
        } else {
          this.$message.error(result.message);
          console.log(result.message);
        }
      });
      //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
      //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
      // 暂时不用登录;
      // window.sessionStorage.setItem("userid", this.loginForm.username);
      // window.sessionStorage.setItem("username", this.loginForm.username);
      // window.sessionStorage.setItem(
      //   "userimg",
      //   "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
      // );
      // this.$store.commit("login");
      // this.$router.push("home");
    },
    //跳转注册页面
    regest() {
      this.$router.push("regest");
    },
    admin() {
      this.$router.push("adminlogin");
    },
  },
};
</script>

<style lang="less" scoped>
.bg {
  background-image: url(https://th.bing.com/th/id/Rd6b536429ab44afea81917a8b972f985?rik=o7vAgRE0JiouTw&riu=http%3a%2f%2fwww.tianlaiedu.com%2fUpFile%2fimage%2f20180117%2f20180117151032_8959.jpg&ehk=wOF%2b7u%2bACDKInZslJo4ciopiJ%2b6e8j7Wzq%2fNbvTLxuM%3d&risl=&pid=ImgRaw);
  background-repeat: no-repeat;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
  width: 100%;
  height: 100%;
}
.login_container {
  height: 100%;
}
.header {
  width: 100%;
  height: 60px;
  line-height: 60px;
}
.header h3 {
  display: inline-block;
  margin: 40px 40px;
  height: 60px;
  font-weight: 400;
  font-size: 50px;
  color: #fff;
  font-family: "SimSun";
}
.login_box {
  width: 500px;
  height: 550px;
  background-color: #fff;
  border-radius: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.login_box .login_top {
  display: inline-block;
  width: 100%;
  height: 80px;
  background-color: #f0f0f0;
  font-size: 38px;
  text-align: center;
  line-height: 80px;
  border-radius: 5px 5px 0 0;
}
/deep/ .el-button {
  font-size: 17px;
  width: 204px;
}
.login_form {
  padding: 30px 40px;
}
/deep/.el-input__inner {
  font-size: 19px;
}
/deep/.el-form-item__label {
  font-size: 20px;
}
</style>